import React, { Component } from 'react';
import { Map, Marker, NavigationControl, MapvglView, MapvglLayer } from 'react-bmapgl';
import url from '@/config/url'
import axios from '@/http/http'
class Index extends Component {
    state = {
        point: []
    }
    render() {
        return (
            <Map center={{ lng: 116.402544, lat: 39.928216 }} enableScrollWheelZoom zoom="10">
                <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
                <NavigationControl />
                {/* <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="千锋北科校区" title="软件人才基地" /> */}
                <MapvglView effects={['bright']}>
                    <MapvglLayer
                        type="PointLayer"
                        data={this.state.point}
                        options={{
                            blend: 'lighter',
                            size: 12,
                            color: 'rgb(255, 53, 0, 0.6)'
                        }}
                    />
                </MapvglView>
            </Map>
        );
    };
    componentDidMount() {
        // 发起数据请求
        axios.get(url.getcinemalocation).then(res => {
            // 
            var data = [{
                geometry: {
                    type: 'Point',
                    coordinates: [116.403748, 39.915055]
                }
            }];
            console.log(res);
            if (res.data.errNo == 0) {
                // 
                res.data.paginate.slice(0, 50).map(item => {
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]]
                        }
                    })
                })

                this.setState({
                    point: data
                })
            }
        })
    }
}

export default Index;
